<template>
  <el-dialog
    title="选择指定商品"
    :visible.sync="visible"
    :before-close="handleClose"
    width="40%"
  >
    <el-form>
      <el-form-item label="选择成为分销员条件的指定商品"></el-form-item>
      <el-form-item label="按商品分类筛选">
        <el-cascader
          v-model="goodsType"
          :options="options"
          :props="defaultProps"
          size="small"
          clearable
          @change="getList"
        ></el-cascader>
      </el-form-item>
      <el-form-item>
        <Table :data="listData" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            label="商品名称"
            align="center"
            property="goods_name"
          ></el-table-column>
          <el-table-column label="商品头像" align="center">
            <template slot-scope="scope">
              <img
                :src="
                  $store.state.qiniu +
                    scope.row.goods_cover.split(',')[0] +
                    $store.state.imgRotate
                "
                width="80px"
              />
            </template>
          </el-table-column>
          <el-table-column label="销售价格" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.low_goods_price == scope.row.up_goods_price"
                >￥{{ scope.row.low_goods_price }}</span
              >
              <span v-else
                >￥{{ scope.row.low_goods_price }} - ￥{{
                  scope.row.up_goods_price
                }}</span
              >
            </template>
          </el-table-column>
        </Table>
        <el-pagination
          style="text-align: center;margin-top: 10px;"
          :page-size="4"
          layout="prev, pager, next"
          :total="totals"
          @current-change="changes"
        >
        </el-pagination>
      </el-form-item>
    </el-form>

    <span slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSumbit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { GOODSLISTShop, GETLISTShopClass } from "@/service/shop";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      listData: [],
      Arr: [],
      pages: 1,
      totals: 0,
      options: [],
      goodsType: "",
      defaultProps: {
        value: "type_id",
        children: "second",
        label: "type_name",
        checkStrictly: true
      }
    };
  },
  watch: {
    visible(v) {
      if (v) {
        this.getList();
        this.getCommodityClass();
      }
    }
  },
  methods: {
    handleSelectionChange(e) {
      this.Arr = e;
    },
    handleClose() {
      this.$emit("outDialog");
    },
    async handleSumbit() {
      this.$emit("outDialog", this.Arr);
    },
    changes(page) {
      this.pages = page;
      this.getList();
    },
    async getCommodityClass() {
      await GETLISTShopClass().then(({ code, data }) => {
        if (code === 200) {
          this.options = data;
        }
      });
    },
    async getList() {
      await GOODSLISTShop({
        page: this.pages,
        pageshow: 4,
        flag: "exclusive",
        goodsType: this.goodsType[this.goodsType.length - 1]
      }).then(({ code, data, msg }) => {
        if (code === 200) {
          this.totals = data.length;
          this.listData = data.list;
        } else {
          this.totals = 0;
          this.listData = [];
          this.$message.error(msg);
        }
      });
    }
  }
};
</script>
